<script setup lang="ts">
import SvgIcon from "../SvgIcon/index.vue";
import { useSettingsStore } from "../../store/modules/settings"; //默认配置
import userStore from "@/store/user";
import { reactive, ref, onMounted } from "vue";
import router from "@/router";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { Userreq, Userres } from "@/typings/user";
import { storeToRefs } from "pinia";
//@ts-ignore
import { Login } from "@/api/login.ts";
import { useAppStore } from "@/store/modules/app.ts";
//@ts-ignore
const AppStore = useAppStore();
const settingsStore = useSettingsStore();
const { title } = settingsStore;
const { isSend } = storeToRefs(userStore());

//表单验证规则
interface RuleForm {
  username: string; //用户名
  password: string; //密码
}
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  username: "admin",
  password: "",
});

const rules = reactive<FormRules<RuleForm>>({
  username: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
  password: [
    {
      required: true,
      message: "Please input Activity password",
      trigger: "blur",
    },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      var data: Userreq = {
        username: "admin",
        password: ''
      }
      Login(data).then(function (res: any) {
        let data: Userres = res;
        let token = data?.token;
        if (token) {
          console.log(token);
          localStorage.setItem("tokenValue", token);
          AppStore.userName = data?.roles;
          ElMessage({
            type: "success",
            message: "登录成功",
          });
          router.push({ path: "/index" });
        }
      });
      // localStorage.setItem("tokenValue", "ASDAWA");
      // AppStore.userName = "admin";
      // router.push({ path: "/index" });
    } else {
      console.log("error submit!", fields);
    }
  });
};

//密码是否可见
const passwordVisible = ref(false); // 密码是否可见

onMounted(() => {
  // 主题初始化
  const theme = settingsStore.theme;
  settingsStore.changeSetting({ key: "theme", value: theme });
  if (theme == "dark") {
    document.documentElement.classList.add("dark");
  } else {
    document.documentElement.classList.remove("dark");
  }
});

const slideRef = ref();
const leftAndRight = ref(false);
function addClass(flag: boolean) {
  if (flag) {
    slideRef.value.style.transform = "translateX(100%)";
  } else {
    slideRef.value.style.transform = "translateX(0%)"; // 设置元素的 transform 属性来触发过渡
  }
}
</script>

<template>
  <el-card class="login-card">
    <div class="login_container">
      <!-- 注册 -->
      <div id="regster">
        <div class="title">
          <h2>注册</h2>
        </div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="login-form" status-icon>
          <el-form-item prop="username" class="form-item">
            <el-input v-model="ruleForm.username" prefix-icon="User" size="large" :placeholder="$t('login.username')"
              name="username" />
          </el-form-item>

          <el-form-item prop="password">
            <el-input prefix-icon="Key" v-model="ruleForm.password"
              :type="passwordVisible === false ? 'password' : 'input'" :placeholder="$t('login.password')" size="large"
              name="password" class="input-with-select">
              <template #append>
                <span @click="passwordVisible = !passwordVisible" style="line-height: 100%;">
                  <svg-icon :icon-class="passwordVisible === false ? 'eye' : 'eye-open'" class="cursor-pointer" />
                </span>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%" @click="submitForm(ruleFormRef)">{{ $t("login.regster") }}
            </el-button>
          </el-form-item>
          <!-- 账号密码提示 -->
          <div class="mt-10 text-sm">
            <span class="ml-4"> 满足账号密码要求即可注册！</span>
          </div>
        </el-form>
      </div>

      <!-- 登录 -->
      <div id="login">
        <div class="title">
          <h2>登录</h2>
        </div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="login-form" status-icon>
          <el-form-item prop="username" class="form-item">
            <el-input v-model="ruleForm.username" prefix-icon="User" size="large" :placeholder="$t('login.username')"
              name="username" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input prefix-icon="Key" v-model="ruleForm.password"
              :type="passwordVisible === false ? 'password' : 'input'" :placeholder="$t('login.password')" size="large"
              name="password" class="input-with-select">
              <template #append>
                <span @click="passwordVisible = !passwordVisible" style="line-height: 100%;">
                  <svg-icon :icon-class="passwordVisible === false ? 'eye' : 'eye-open'" class="cursor-pointer" />
                </span>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%" @click="submitForm(ruleFormRef)" :loading="isSend">{{
          $t("login.login") }}
            </el-button>
          </el-form-item>
          <!-- 账号密码提示 -->
          <div class="mt-10 text-sm">
            <span class="ml-4"> 满足账号密码要求即可登录！</span>
          </div>
        </el-form>
      </div>
      <!-- 蒙版 -->
      <div id="mask" ref="slideRef" style="border-radius: 2px">
        <h3 style="text-align: center">{{ title }}</h3>
        <div style="display: flex; justify-content: center">
          <transition name="fade-left" mode="out-in">
            <div class="mask-left" v-if="!leftAndRight">
              <div>
                <svg-icon icon-class="login" size="100px" />
              </div>
              <p>还没有账号</p>
              <el-tag @click="addClass((leftAndRight = !leftAndRight))" v-if="!leftAndRight">去注册</el-tag>
            </div>
          </transition>
          <transition name="fade-right" mode="out-in">
            <div class="mask-right" v-if="leftAndRight">
              <div>
                <svg-icon icon-class="regster" size="100px" />
              </div>
              <p>已经有账号</p>
              <el-tag @click="addClass((leftAndRight = !leftAndRight))" v-if="leftAndRight">去登录</el-tag>
            </div>
          </transition>
        </div>
      </div>
    </div>
  </el-card>
</template>

<style scoped>
.login_container {
  width: 600px;
  display: flex;
  position: relative;
}

#regster {
  width: 50%;
  padding: 20px;
}

#login {
  width: 50%;
  padding: 20px;
}

#mask {
  position: absolute;
  width: 300px;
  height: 100%;
  background-color: skyblue;
  top: 0;
  left: 0;
  z-index: 100;
  transition: 0.5s ease-in-out;
}

.right {
  position: absolute;
  width: 300px;
  height: 100%;
  background-color: skyblue;
  top: 0;
  left: 50%;
  transition: 0.5s ease-in-out;
}

.left {
  position: absolute;
  width: 300px;
  height: 100%;
  background-color: skyblue;
  top: 0;
  left: 0;
  transition: 0.5s ease-in-out;
}

.login-card {
  padding: 20px;
}

.title {
  display: flex;
  align-items: center;
  justify-content: center;
}

.version {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 15px;
  margin-right: 15px;
}

/* 表单 */
.form-item {
  display: flex;
}

.mask-left {
  text-align: center;
}

.mask-right {
  text-align: center;
}

/* 页面过渡动画 */
.fade-left-enter-active,
.fade-left-leave-active {
  transition: all 0.3s;
}

.fade-left-enter-from,
.fade-left-leave-to {
  opacity: 0;
}

.fade-right-enter-active,
.fade-right-leave-active {
  transition: all 0.3s;
}

.fade-right-enter-from,
.fade-right-leave-to {
  opacity: 0;
}
</style>
